<template>
	<view>
		<uni-forms-item :label="item.label || ''" :name="item.prop || ''" :required="item[item['type']].required || false" style="width: 100%">
			<!-- 输入框 -->
			<template v-if="item.type == 'input'">
				<uni-easyinput v-model="dataValue" v-bind="item.input"></uni-easyinput>
			</template>
			<template v-if="item.type == 'auto'">
				<dil-select
					v-model="dataValue"
					v-bind="item[item.type]"
					style="width: 55vw"
					@autoChange="autoChange"
					:options="candidates"
					@input="autoInput"
					@blur="onblur(item.prop)"
					@onfucs="onfucs"
					@uniteRequest="uniteRequestAuto"
				></dil-select>
			</template>
			<!-- 文件上传 -->
			<template v-if="item.type == 'filePicker'">
				<dil-file
					v-model="dataValue"
					v-bind="item.filePicker"
					style="width: 55vw"
					@select="selectFile"
					@delete="deleteFile"
					return-type="array"
					:fileChineseType="item.label"
				/>
			</template>
			<template v-if="item.type == 'checkbox'">
				<uni-data-checkbox v-bind="item.checkbox" v-model="dataValue" :localdata="itemList" style="width: 55vw"></uni-data-checkbox>
			</template>
			<template v-if="item.type == 'datePicker'">
				<uni-datetime-picker
					v-bind="item.datePicker"
					:return-type="item.datePicker['valueFormat']"
					:placeholder="item.datePicker.placeholder || '选择日期'"
					:start-placeholder="item.datePicker.startPlaceholder || '开始日期'"
					:end-placeholder="item.datePicker.endPlaceholder || '结束日期'"
					range-separator="至"
					v-model="dataValue"
				></uni-datetime-picker>
			</template>
			<template v-if="item.type == 'select'">
				<dil-select
					v-model="dataValue"
					v-bind="item[item.type]"
					style="width: 55vw"
					@autoChange="autoChange"
					:options="candidates"
					@input="autoInput"
					@blur="onblur($event, item.prop)"
					@onfucs="onfucs"
					@uniteRequest="uniteRequestAuto"
				></dil-select>
			</template>
		</uni-forms-item>
	</view>
</template>

<script>
import { myRequest } from '@/utils/api.js';
import { debounce, uuid } from '@/utils/utils.js';
export default {
	name: 'form-item',
	model: {
		prop: 'itemValue',
		event: 'change'
	},
	data() {
		return {
			candidates: [],
			itemList: [],
			defaultValue: null
		};
	},
	props: {
		item: {
			type: Object,
			require: true
		},
		itemValue: {
			default: null
		},
		formValue: {
			default() {
				return {};
			}
		}
	},
	watch: {
		itemValue(val) {
			let prop = this.item.prop;
			if (typeof this.uniteRequestDebounce == 'function') {
				this.uniteRequestDebounce();
			} else {
				this.uniteRequest();
			}
		},
		deep: true
	},
	created() {
		const item = this.item;
		console.log(item, 'item');
		if (item[item.type]) {
			const sourceType = item[item.type].sourceType;
			this.defaultValue = item[item.type].defaultValue || null;
			if (this.defaultValue) {
				this.onChange(this.defaultValue);
			}
			switch (sourceType) {
				case 'request':
					let requestObj = item[item.type].request;
					if (requestObj.url) {
						this.uniteRequest(null);
					}
					break;
				case 'list':
					this.itemList = item[item.type].list.list;
					this.candidates = this.itemList;
					break;
			}
		}
	},
	mounted() {
		this.uniteRequestDebounce = debounce((val) => {
			this.uniteRequest(val);
		}, 500);
		this.debounceAutoInput = debounce((value, flag) => {
			this.autoInput(value, flag);
		}, 1000);
	},
	computed: {
		dataValue: {
			get() {
				return this.itemValue;
			},
			set(value) {
				this.onChange(value);
			}
		}
	},
	methods: {
		uniteRequestAuto(value) {
			if (typeof this.uniteRequestDebounce == 'function') {
				this.uniteRequestDebounce(value);
			} else {
				this.uniteRequest(value);
			}
		},
		async uniteRequest(value) {
			const item = this.item;
			if (item[item.type].sourceType && item[item.type].sourceType == 'list') {
				return 1;
			}
			let requestObj = item[item.type].request;
			if (!requestObj) {
				return 1;
			}
			let requestParams = {};
			let requestData = {};
			let inputMap = {};
			if (requestObj && requestObj.params && requestObj.params.length > 0) {
				requestParams = requestObj.params.reduce((prev, item) => {
					if (item.prop) {
						prev[item.prop] = item.value || this.formValue[item.prop];
					}
					return prev;
				}, {});
			}
			if (requestObj && requestObj.data && requestObj.data.length > 0) {
				requestData = requestObj.data.reduce((prev, item) => {
					if (item.prop) {
						prev[item.prop] = item.value || this.formValue[item.prop];
					}
					return prev;
				}, {});
			}
			if (this.dataValue) {
				if (Object.prototype.toString.call(this.dataValue) === '[object Array]') {
					requestParams['id'] = this.dataValue;
				} else {
					requestParams['id'] = [this.dataValue];
				}
			}
			if (value && typeof value != 'undefined') {
				inputMap = {
					index: value
				};
			}
			const res = await myRequest({
				url: requestObj.url,
				showLoading: false,
				data: { ...requestParams, ...requestData, ...inputMap }
			});
			this.itemList = res.data.data;
			this.candidates = res.data.data;
		},
		//失去焦点
		onblur(e, name) {
			let that = this;
			const item = this.item;
			if (item.type == 'select' && item['select'].customTitle) {
				let map = {};
				let customTitle = item['select'].customTitle;
				map[customTitle] = e;
				this.$emit('autoChange', map);
			}
			setTimeout(() => {
				let that = this;
				that.$emit('onblur', name);
			}, 200);
		},
		onfucs() {
			// this.uniteRequest('');
		},
		onChange(value) {
			this.$emit('change', value);
		},
		autoChange(value) {
			let item = this.item;
			if (item.type == 'select' && item['select'].autoChangeKeys) {
				let keys = item['select'].autoChangeKeys.split(',');
				let onchangeMap = {};
				keys.forEach((key) => {
					onchangeMap[key] = value[key];
				});
				this.$emit('autoChange', onchangeMap);
			}
		},
		autoInput(value, flag) {},
		async selectFile(e) {
			console.log(e, 'e');
			let that = this;
			const map = {};
			// let fileType = that.item.label;
			// map.fileType = fileType;
			this.onChange(e.tempFilePaths);
			// this.$emit('selectFile', map);
		},
		deleteFile(e) {
			// let that = this;
			// const map = {};
			// map[`${that.item.prop}_FileAuto`] = e.tempFile;
			// this.$emit('deleteFile', map);
		}
		//处理图片水印
	}
};
</script>

<style></style>
